import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'umi';
import { Tabs } from 'antd';
import { history } from 'umi';
import { stringify } from 'qs';
import { withI18n } from '@lingui/react';
import { Page } from 'components';
import List from './components/List';

const { TabPane } = Tabs;

const EnumPostStatus = {
    UNPUBLISH: 1,
    PUBLISHED: 2,
};

@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class Post extends PureComponent {
    handleTabClick = key => {
        const { pathname } = this.props.location;

        history.push({
            pathname,
            search: stringify({
                status: key,
            }),
        });
    };

    get listProps() {
        const { post, loading, location } = this.props;
        const { list, pagination } = post;
        const { query, pathname } = location;

        return {
            pagination,
            dataSource: list,
            loading: loading.effects['post/query'],
            onChange(page) {
                history.push({
                    pathname,
                    search: stringify({
                        ...query,
                        page: page.current,
                        pageSize: page.pageSize,
                    }),
                });
            },
        };
    }

    render() {
        const { location, i18n } = this.props;
        const { query } = location;

        return (
            <Page inner>
                <Tabs
                    activeKey={
                        query.status === String(EnumPostStatus.UNPUBLISH)
                            ? String(EnumPostStatus.UNPUBLISH)
                            : String(EnumPostStatus.PUBLISHED)
                    }
                    onTabClick={this.handleTabClick}
                >
                    <TabPane tab={i18n.t`Publised`} key={String(EnumPostStatus.PUBLISHED)}>
                        <List {...this.listProps} />
                    </TabPane>
                    <TabPane tab={i18n.t`Unpublished`} key={String(EnumPostStatus.UNPUBLISH)}>
                        <List {...this.listProps} />
                    </TabPane>
                </Tabs>
            </Page>
        );
    }
}

Post.propTypes = {
    post: PropTypes.object,
    loading: PropTypes.object,
    location: PropTypes.object,
    dispatch: PropTypes.func,
};

export default Post;
